<template>
  <!-- 内容区域 -->
  <div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
      <h1>
        商品管理
        <small>管理您仓库中的商品</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-archive"></i> 商品管理</a></li>
        <li><a href="#"> 商品详情</a></li>
        <li class="active">修改商品</li>
      </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">
      <!-- 修改密码 -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">修改商品</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
          <div class="box-body">
            <div class="form-group">
              <label for="productId">商品Id</label>
              <input id="productId" :value="product.id" class="form-control" data-cip-id="productId" disabled
                     placeholder="商品Id" type="text">
            </div>
            <div class="form-group">
              <label for="productName">名称</label>
              <input id="productName" :value="product.name" class="form-control" data-cip-id="productName"
                     placeholder="名称" type="text">
            </div>
            <div class="form-group">
              <label for="productCount">数量</label>
              <input id="productCount" :value="product.count" class="form-control" data-cip-id="productCount"
                     placeholder="数量" type="number">
            </div>
            <div class="form-group">
              <label for="productUnsell">可销售数量</label>
              <input id="productUnsell" :value="product.unsell" class="form-control" data-cip-id="productUnsell"
                     placeholder="可销售数量" type="number">
            </div>
            <div class="form-group">
              <label for="productPrice">价格</label>
              <input id="productPrice" :value="product.price" class="form-control" data-cip-id="productPrice"
                     placeholder="可销售数量" type="number">
            </div>
            <div>
              <p id="message" class="alert alert-danger hidden">message</p>
            </div>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <button class="btn btn-primary" type="button" @click="change">提交修改</button>
          </div>
        </form>
      </div>
      <!-- /.row -->
    </section>
    <!-- 正文区域 /-->

  </div>
  <!-- 内容区域 /-->
</template>

<script>
export default {
  name: "ChangeProduct",
  data() {
    return {
      product: this.GLOBAL.appData.productList[this.$route.params.index]
    }
  },
  methods: {
    change() {
      var productName = document.getElementById("productName");
      var productCount = document.getElementById("productCount");
      var productUnsell = document.getElementById("productUnsell");
      var productPrice = document.getElementById("productPrice");
      if (productName.value === "" || productCount.value === "" || productUnsell.value === "" || productPrice.value === "") {
        this.$message.warning("商品信息不得为空");
      } else {
        this.GLOBAL.appData.productList[this.$route.params.index].name = productName.value;
        this.GLOBAL.appData.productList[this.$route.params.index].count = productCount.value;
        this.GLOBAL.appData.productList[this.$route.params.index].unsell = productUnsell.value;
        this.GLOBAL.appData.productList[this.$route.params.index].price = productPrice.value;
        this.$message.info("修改成功（模拟操作）");
        this.$router.push("/main/productData");
      }
    }
  }
}
</script>

<style scoped>

</style>